<template>
  <div>
    <a-row>
      <a-col :flex="1">
        <a-form
          :model="formModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-align="left"
          ref="searchFormRef"
        >
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item field="number" label="酒类">
                <a-select
                  placeholder="请选择酒类"
                  v-model="form.winetype_id"
                  allow-clear
                >
                  <a-option
                    v-for="(item, i) in wineTypeList"
                    :key="i"
                    :value="item.wine_id"
                    :label="item.wine_name"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="createdTime" label="出库时间">
                <a-range-picker style="width: 100%" v-model="form.chuku_date" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-divider style="height: 84px" direction="vertical" />
      <a-col :flex="'86px'" style="text-align: right">
        <a-space direction="vertical" :size="18">
          <a-button type="primary" @click="getNewOutInfo">
            <template #icon>
              <icon-search />
            </template>
            {{ $t('searchTable.form.search') }}
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            {{ $t('searchTable.form.reset') }}
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-divider style="margin-top: 0" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

const props = defineProps({
  wineTypeList: { type: Array, default: () => [] },
  getOutList: { type: Function, default: () => {} },
});
const searchFormRef = ref();

const form = reactive({
  winetype_id: '',
  chuku_date: '',
});
const reset = () => {
  form.winetype_id = '';
  form.chuku_date = '';
  props.getOutList(1)
};
const getNewOutInfo = () => {
  props.getOutList(1)
};
defineExpose({
  form,
});
</script>

<style scoped lang="less">
</style>